<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="../../build/aui-css/css/bootstrap.css">
    <script src="../../build/aui/aui.js"></script>
    <style>
    .cropped-image {
        background: url(assets/lfr-soccer-1.jpg) no-repeat;
        display: inline-block;
        border: 10px solid #111;
        position: absolute;
        top: 80px;
        left: 550px;
        text-align: center;
    }
    .x, .y, .width, .height {
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        padding: 3px;
        border-radius: 4px;
        white-space: nowrap;
    }
    .x {
        bottom: 100%;
        right: 100%;
    }
    .y {
        right: 100%;
        top: 100%;
    }
    .width {
        bottom: 100%;
        left: 100%;
    }
    .height {
        top: 100%;
        left: 100%;
    }
    </style>
</head>
<body>
    <h1>AlloyUI - Image Cropper</h1>
    <img id="image" src="assets/lfr-soccer-1.jpg" /><br>
    <button id="cropLink" class="btn btn-primary">Crop Image to x: 45, y: 5, width: 390, height: 125</button>
    <div class="cropped-image" id="croppedImage"></div>
    <script>
    YUI({ filter: 'raw' }).use('aui-image-cropper', function(Y) {

        var imageCropper = new Y.ImageCropper({
            srcNode: '#image',
            x: 100,
            y: 100
        }).render();

        var croppedImage = Y.one('#croppedImage');

        var updateImage = function() {
            var cropRegion = imageCropper.get('region');

            croppedImage.setStyles({
                backgroundPosition: (-cropRegion.x) + 'px ' + (-cropRegion.y) + 'px',
                height: cropRegion.height,
                width: cropRegion.width
            });
            croppedImage.html(
                Y.Lang.sub('<b class="x">x: {x}</b><b class="y">y: {y}</b><b class="height">height: {height}</b><b class="width">width: {width}</b>', cropRegion)
            );
        };

        updateImage();
        imageCropper.after('crop', updateImage);
        croppedImage.show();

        Y.one('#cropLink').on('click', function (event) {
            imageCropper.setAttrs({
                x: 45,
                y: 5,
                cropWidth: 390,
                cropHeight: 125
            });
        });

    });
    </script>
</body>
</html>